


// webpack 基本配置属性
// 入口
// 出口
// devtool
// 模块打包
// JS/JSX/TSX/TS
// PNG/JPG
// CSS/LESS/SCSS
// JSON/HTML
// plugin 插件 
const  path = require('path')
const  OpenBrowserPlugin = require('webpack-open-browser-plugin');     // 打开浏览器
const  htmlWebpackPlugin = require('html-webpack-plugin')   // 打包html 
const  MiniCssExtractPlugin = require("mini-css-extract-plugin");  // 压缩css 和  抽离CSS(JS)
const webpack =require('webpack')
module.exports = {
    mode:"development",  // development 开发环境  production 线上环境  
    entry:[
        './src/main.js' // 主入口文件  
    ],
    output:{
        path:path.join(__dirname,'dist') , // dist 出口文件就是dist  __dirname 根目录 
        filename:"js/[name].[fullhash:8].js",  // hash 哈希算法 得到长度为8的随机字符串 
        publicPath:"", // 打包的相对路径 
    },

    devtool:"source-map",   // 查询源代码 方便在线调试  上线关闭 

   // 别名 
    resolve:{
       alias:{  
        "@":path.resolve("src"),
        "~":path.resolve("src/utils"),
       }
    },

    // 需要打包的模块
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:['babel-loader']
            },
            {
                test:/\.(png|jpg|svg|gif|ttf|woff|woff2|eot)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192, // 8M 限制图片最大不能超过8M 
                            name:'./img/[name].[hash:8].[ext]'  // photo.png => photo.1234qwer.png
                        }
                    }
                ]
            },
            // css打包 
            {
                test:/\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],  //抽离css
            },
            {
                test:/\.less$/,
                use: [MiniCssExtractPlugin.loader,"css-loader","less-loader"],  //抽离css
            },
            {
                test:/\.(sass|scss)$/,
                use: [MiniCssExtractPlugin.loader, "css-loader","sass-loader"],  //抽离css
            }
        ]
    },

//     // 服务器属性
    devServer:{
        liveReload: true,  // 自动更新代码
        host:"0.0.0.0",    // 服务器主机
        port:7000,         // 服务器端口 
        hot:true,
        compress:true,
        open:true,  // 自动打开浏览器
    },

    // 插件
    plugins:[
        // 自动打开浏览器 
        new OpenBrowserPlugin({
            url:"http://localhost:7000/"
        }),

        // 打包HTML 
        new htmlWebpackPlugin({
            template:"./public/index.html",
            inject:true,  // 自动注入打包的js 和 css
            minify:true, // 压缩
        }),

        // 抽离css
        new MiniCssExtractPlugin({
            filename:'css/[name].[chunkhash:8].css',   // 文件名
            chunkFilename:"css/[id].[chunkhash:8].css" // 打包文件标志 
        }),
        //全局自动引入
        new webpack.ProvidePlugin({
              React:'React',
              Component:['react','Component']
        })
    ]
}